<template>
	<view class="box">
		<view class="box1">
			<view class="first">
				<view class="left">
					<!-- 充值方式 -->
				</view>
				<view class="right">
					
				</view>
			</view>
			<view class="">
				<view class="" style="padding: 20rpx 0;">
					<text>充值金额</text>
				</view>
				<view class="" style="display: flex;align-items: center;border-bottom:1px solid #e2e2e2 ;">
					<text style="font-size: 28rpx;font-weight: 600;">￥</text><input type="number" v-model="value" value="" placeholder="请输入充值金额" />
				</view>
			</view>
		</view>
		<view class="">
			<u-keyboard mode="number" @change="valChange" @backspace="backspace" v-model="show" @confirm="chongzhi" :mask="false"
				:mask-close-able="false"></u-keyboard>
		</view>
		<!-- 弹出层输入支付密码 -->
		<view class="tan">
			<u-popup class="tan-box" v-model="flas" mode="center" border-radius="14" width="600rpx" height="150px">
				<view class="top">
					<text>支付密码</text>
				</view>
				<view class="seconde">
					<text>￥{{value}}</text>
				</view>
				<view>
					<u-message-input :maxlength="6"  @change="change" @finish="finish" :dot-fill="true" ></u-message-input>
				<!-- 	<u-message-input :maxlength="6"  v-model="zhifupassword" @change="change"
						@finish="finish" :dot-fill="true"></u-message-input>
					<u-keyboard mode="number" @change="passChange" @backspace="passsbackspace" v-model="passshow"
						@confirm="zhifu" :mask-close-able="false" :tooltip="false" :mask="false"></u-keyboard> -->
				</view>
			</u-popup>
		</view>
		<!-- 支付密码设置成功 -->
		<u-toast ref="uToast" />
		
		<!-- 支付密码错误 -->
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('user');
	export default {
		onReady() {
			// 如果想一进入页面就打开键盘，请在此生命周期调用
			this.show = true;
		},
		data() {
			return {
				show: false,
				value: '', //金额
				flas: false,
				// zhifupassword: "", //支付密码
				// passshow: false
			}
		},
		methods: {
			...mapActions(['judgeUserPayPad','changeUserBalance']),
			// 输入金额键盘按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.value += val;
				//console.log(this.value);
			},
			//  输入金额键盘退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
				//console.log(this.value);
			},
			
			// 支付键盘按键被点击(点击退格键不会触发此事件)
			// passChange(val) {
				
			// 	this.zhifupassword += val;
				
			// },
			// 支付键盘退格键被点击
			// passsbackspace() {
			
			// 	if (this.zhifupassword.length) this.zhifupassword = this.zhifupassword.substr(0, this.zhifupassword
			// 		.length - 1);
				
			// },
			chongzhi() {
				this.flas = true
				this.passshow = true
			},
			zhifu() {
				this.passshow = true
			},
			change(e) {
				console.log('内容改变，当前值为：' + e);
			},
			//支付密码输入完成
			 finish(e) {
				console.log('输入结束，当前值为：' + e);
				this.pay(e)
			},
			//调用支付密码接口成功后充值金额
			async pay(pass){
				uni.showLoading({
				    title: '加载中'
				});
				const data = await this.judgeUserPayPad({
					userPayPad: pass
				})
				console.log("cz", data)
				if (data.code == 10006) {
					uni.hideLoading()
				} else if (data.code == 10001) {
					//支付密码正确
					this.changMoney()
				} else if (data.code == 10002) {
					//支付密码错误
					uni.hideLoading()
					this.$refs.uTips.show({
									title: '支付密码错误，请重新输入',
									type: 'error',
									duration: '2300'
								})
				}else{
					uni.hideLoading()
				}
			},
			//修改余额
			async changMoney(){
				const data1=await this.changeUserBalance({
					transactionMoney:this.value,
					transactionType:"充值"
				})
				console.log("data1",data1)
				if(data1.code==10001){
					uni.hideLoading()
				//修改余额成功返回钱包页面
				this.$refs.uToast.show({
					title: '充值成功',
					type: 'success',
					url: '/pages/myWallet/myWallet'
				})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.box1 {
			padding: 20rpx 20rpx;
            
			input {
				// border-bottom: 1px solid #e2e2e2;
				//border: 1px solid #e2e2e2;
				padding: 20rpx 10rpx;
				font-size: 26rpx;
			}
			.first{
				display: flex;
				.left{
					
				}
				.right{
					
				}
			}
		}

		.tan {
			.tan-box {
				.top {
					text-align: center;
					padding: 20rpx 0;
					font-size: 30rpx;
					font-weight: 600;
				}

				.seconde {
					text-align: center;
					padding: 20rpx 0;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
